<template>
    <div class="app-container" style="padding:20px">
        <el-card>
            <FormTopBar :title="title" :flowInsId="form.flowInsId" :taskId="taskId" :businessId="form.id"
                        :billType="form.billType" @submitForm="submitForm"></FormTopBar>
        </el-card>
        <FlowInfoCard  :id="form.id+''" :billType="form.billType" :flowInsId="form.flowInsId">
            <!-- 添加或修改员工入职对话框 -->
            <el-form ref="form" :model="form" :rules="rules" label-width="120px" :disabled="readonly">
                <el-card class="top15">
                    <div slot="header" class="clearfix">
                        <span>基础信息</span>
                        <span style="float: right" v-if="form.id!=undefined">单据编号：{{form.billcode}}</span>
                    </div>
                    <el-form-item label="报销缘由" prop="des">
                        <el-input v-model="form.des" type="textarea" :rows="5" placeholder="请输入报销缘由"/>
                    </el-form-item>
                    <el-row>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="开始时间" prop="startTime">
                                <el-date-picker clearable v-model="form.startTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择开始时间"></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="结束时间" prop="endTime">
                                <el-date-picker clearable v-model="form.endTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择结束时间"></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="月度" prop="month">
                                <el-date-picker clearable v-model="form.month" type="month" value-format="yyyy-MM" placeholder="请选择月度"></el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row v-if="form.billType=='reimburse_bus'">
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="出差地点" prop="city">
                                <el-input v-model="form.city" placeholder="请输入出差地点"/>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="出差天数" prop="city">
                                <el-input v-model="form.days" placeholder="请输入出差天数" type="number"  @change="calcSubsidyAmt" class="numberRight" />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="补贴金额" prop="month">
                                <el-input v-model="form.standardSubsidy" placeholder="请输入补贴金额" type="number" @change="calcSubsidyAmt" class="numberRight">
                                    <template slot="append">元</template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="票据总数" prop="billCount">
                                <el-input v-model="form.billCount" placeholder="请输入票据总数" type="number" class="numberRight">
                                    <template slot="append">张</template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-form-item label="备注" prop="remark">
                        <el-input v-model="form.remark" type="textarea" :rows="5" placeholder="请输入内容"/>
                    </el-form-item>

                    <el-row>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8" v-if="form.billType=='reimburse_bus'">
                            <div style="text-align: right;">
                                <span class="label">补贴总金额</span>
                                <span class="price" style="padding: 15px 5px;">{{util.toEsStr(form.subsidyAmt)}}</span>
                                <span class="label">元</span>
                                <span class="price" style="padding: 15px;">{{util.toChNumStr(form.subsidyAmt)}}</span>
                            </div>
                        </el-col>

                        <el-col :xs="24" :sm="12" :md="8" :lg="8" v-if="form.billType=='reimburse_bus'">
                            <div style="text-align: right;">
                                <span class="label">票据总金额</span>
                                <span class="price" style="padding: 15px 5px;">{{util.toEsStr(form.billAmt)}}</span>
                                <span class="label">元</span>
                                <span class="price" style="padding: 15px;">{{util.toChNumStr(form.billAmt)}}</span>
                            </div>
                        </el-col>

                        <el-col :span="form.billType=='reimburse_bus'?8:24">
                            <div style="text-align: right;">
                                <span class="label">最终报销金额</span>
                                <span class="price" style="padding: 15px 5px;">{{util.toEsStr(form.totalAmt)}}</span>
                                <span class="label">元</span>
                                <span class="price" style="padding: 15px;">{{util.toChNumStr(form.totalAmt)}}</span>
                            </div>
                        </el-col>
                    </el-row>
                </el-card>
                <el-card class="top15">
                    <div slot="header" class="clearfix">
                        <span>报销费用明细信息</span>
                    </div>
                    <el-row :gutter="10" class="mb8" v-if="util.isEmpty(taskId) && util.isEmpty(form.flowInsId)">
                        <el-col :span="1.5">
                            <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddoaReimburseFeeitem">添加</el-button>
                        </el-col>
                        <el-col :span="1.5">
                            <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteoaReimburseFeeitem">删除</el-button>
                        </el-col>
                    </el-row>
                    <el-table  :border="Global.tableShowBorder" :data="oaReimburseFeeitemList" :row-class-name="rowoaReimburseFeeitemIndex"
                              @selection-change="handleoaReimburseFeeitemSelectionChange" ref="oaReimburseFeeitem">
                        <el-table-column type="selection" width="50" align="center"/>
                        <el-table-column label="序号" align="center" prop="index" width="50"/>
                        <el-table-column label="票据类型" prop="billType" width="200">
                            <template slot-scope="scope">
                                <el-select v-model="scope.row.billType" placeholder="请选择票据类型">
                                    <el-option v-for="dict in dict.type.reimburse_bill_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column label="票据张数" prop="billCount" width="200">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.billCount" placeholder="请输入票据张数" type="number" class="numberRight">
                                    <template slot="append">张</template>
                                </el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="起始地" prop="startCity" width="200">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.startCity" placeholder="请输入起始地"/>
                            </template>
                        </el-table-column>
                        <el-table-column label="目的地" prop="endCity" width="200">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.endCity" placeholder="请输入目的地"/>
                            </template>
                        </el-table-column>
                        <el-table-column label="票据日期" prop="billDate" width="200">
                            <template slot-scope="scope">
                                <el-date-picker clearable v-model="scope.row.billDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择票据日期"/>
                            </template>
                        </el-table-column>
                        <el-table-column label="款项金额" prop="itemAmt" width="200">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.itemAmt" placeholder="请输入款项金额" type="number" @change="calcAmt(scope.row.index)" class="numberRight" >
                                    <template slot="append">元</template>
                                </el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="住宿地点" prop="stayCity">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.stayCity" placeholder="请输入住宿地点"/>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>

                <el-card class="top15">
                    <div slot="header" class="clearfix">
                        <span>票据影像</span>
                    </div>
                    <el-form-item label="票据影像">
                        <image-upload v-model="form.imgUrl" :limit="999" :disabled="readonly"/>
                    </el-form-item>
                </el-card>
            </el-form>
        </FlowInfoCard>
    </div>
</template>

<script>
import {addReimburseApply, getReimburseApply, updateReimburseApply} from "@/api/oa/reimburseApply";
import FlowInfo from "@/views/workflow/flow/flowInfo";
import FormTopBar from "@/views/workflow/common/formTopBar"
import FlowInfoCard from "@/views/workflow/common/flowinfoCard";

export default {
    name: "ReimburseApplyForm",
    dicts: ['oa_flow_billstatus', 'reimburse_bill_type'],
    components:{FlowInfo,FormTopBar,FlowInfoCard},
    data() {
        return {
            title:"",
            // 报销费用明细表格数据
            oaReimburseFeeitemList: [],
            // 子表选中数据
            checkedoaReimburseFeeitem: [],
            // 表单参数
            form: {
                totalAmt:0,
                billAmt:0,
                subsidyAmt:0
            },
            showFlowInfo:false,
            taskId:'',
            // billType:'',
            readonly:false,
            // 表单校验
            rules: {
                month: [
                    {required: true, message: "月度不能为空", trigger: "blur"}
                ],
                city: [
                    {required: true, message: "出差地点不能为空", trigger: "blur"}
                ],
                startTime: [
                    {required: true, message: "开始时间不能为空", trigger: "blur"}
                ],
                endTime: [
                    {required: true, message: "结束时间不能为空", trigger: "blur"}
                ],
                billCount: [
                    {required: true, message: "票据总数不能为空", trigger: "blur"}
                ]
            },
            showCommitDialog:false,
            commitType:""
        };
    },
    provide(){
        return {
            addCcedList:this.addCcedList
        }
    },
    created() {
        //单据的id主键
        const formId = this.$route.params && this.$route.params.formId;
        //单据的类型
        const billType = this.$route.params && this.$route.params.billType;
        const taskId = this.$route.query && this.$route.query.taskId;
        const readonly = this.$route.query && this.$route.query.readonly;
        if(billType){
            this.form.billType = billType;
            this.setTitle(billType);
        }
        if(taskId){
            this.taskId = taskId;
        }
        if("1"==readonly){
            this.readonly = true;
        }
        if(formId){
            this.form.id = formId;
            this.getDetailData(formId);
        }
    },
    mounted() {
        console.log(this.dict.type.driverslicense_type);
    },
    methods: {
        //  获取单据信息
        getDetailData(id) {
            getReimburseApply(id).then(response => {
                this.form = response.data;
                this.setTitle(this.form.billType);
                this.oaReimburseFeeitemList = response.data.oaReimburseFeeitemList;
            });
        },
        setTitle(billType){
            if(billType=="reimburse"){
                this.title = "报销申请单";
            }else if(billType=="reimburse_bus"){
                this.title = "差旅费报销申请单";
            }
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    this.form.oaReimburseFeeitemList = this.oaReimburseFeeitemList;
                    if (this.form.id != null) {
                        updateReimburseApply(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.closeThisPage();
                        });
                    } else {
                        addReimburseApply(this.form).then(response => {
                            this.$modal.msgSuccess("保存成功");
                            this.closeThisPage();
                        });
                    }
                }
            });
        },
        closeThisPage(){
            if (this.form.billType == "reimburse")
                this.$tab.closeOpenPage({ path: "/commonApply/reimburse/reimburseApply",query: {billType:this.form.billType}});
            else if (this.form.billType == "reimburse_bus")
                this.$tab.closeOpenPage({ path: "/commonApply/reimburse/reimburseBusApply",query: {billType:this.form.billType}});
        },
        /** 报销费用明细序号 */
        rowoaReimburseFeeitemIndex({row, rowIndex}) {
            row.index = rowIndex + 1;
        },
        /** 报销费用明细添加按钮操作 */
        handleAddoaReimburseFeeitem() {
            let obj = {};
            obj.remark = "";
            obj.itemAmt = "";
            obj.year = "";
            obj.month = "";
            obj.billType = "";
            obj.billCount = "";
            obj.startCity = "";
            obj.endCity = "";
            obj.billDate = "";
            obj.dayCount = "";
            obj.standardSubsidy = "";
            obj.itemType = "";
            obj.stayCity = "";
            this.oaReimburseFeeitemList.push(obj);
        },
        /***
         * 计算补贴进度
         */
        calcSubsidyAmt(){
            //天数和补贴金额都有
            if(this.form.days && this.form.standardSubsidy){
                this.form.subsidyAmt = (this.form.days * this.form.standardSubsidy).toFixed(2)
            }
            //计算总金额
            this.calcAmt();
        },
        /*****
         * 计算总金额
         */
        calcAmt(){
            let totalAmt = 0;
            let billAmt = 0;
            let subsidyAmt = 0;
            //票据总金额
            this.oaReimburseFeeitemList.forEach((item,index)=>{
                if(item.itemAmt){
                    billAmt = billAmt + parseFloat(item.itemAmt);
                }
            })
            this.form.billAmt = billAmt;
            console.log("票据总金额："+billAmt)
            //添加补贴总金额
            if(this.form.subsidyAmt){
                subsidyAmt = parseFloat(this.form.subsidyAmt);
                console.log("补贴总金额："+subsidyAmt)
            }
            totalAmt = billAmt + subsidyAmt;
            //计算最终金额
            this.form.totalAmt = totalAmt.toFixed(2);
        },
        /** 报销费用明细删除按钮操作 */
        handleDeleteoaReimburseFeeitem() {
            if (this.checkedoaReimburseFeeitem.length == 0) {
                this.$modal.msgError("请先选择要删除的报销费用明细数据");
            } else {
                const oaReimburseFeeitemList = this.oaReimburseFeeitemList;
                const checkedoaReimburseFeeitem = this.checkedoaReimburseFeeitem;
                this.oaReimburseFeeitemList = oaReimburseFeeitemList.filter(function (item) {
                    return checkedoaReimburseFeeitem.indexOf(item.index) == -1
                });
            }
            this.calcAmt();
        },
        /** 复选框选中数据 */
        handleoaReimburseFeeitemSelectionChange(selection) {
            this.checkedoaReimburseFeeitem = selection.map(item => item.index)
        },
        // 创建单据时候，选择了抄送人
        addCcedList(ccedList){
            this.form.ccedList = ccedList;
            console.log("回填抄送人")
            console.log(this.form)
        }
    }
};
</script>
<style lang="scss" scoped>

.label{
    font-size: 14px;
    color: #606266;
    font-weight: 900;
}

.price{
    color: red;
    font-size: 20px;
    font-weight: 900;
}

.priceItem{
    color: red;
    font-size: 18px;
}

</style>
